<template>
  <div>
    <dv-loading v-if="loading">Waiting...</dv-loading>

    <div id="centreLeft1Chart" style="width:400px; height: 400px;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixin";

export default {
  data() {
    return {
      chart: null,
      TrainData: [],
      loading: true
    }
  },
  mixins: [echartMixins],
  computed: {},
  mounted() {
    // 为全局事件总线绑定自定义事件
    this.$bus.$on('getTrainData', (data) => {

      var processData = this.processTrainData(data)
      this.draw(processData);
    })
    //处理我们的
    this.$bus.$on('chanLoadingTrainState', () => {
      this.loading = false
    })
  },
  beforeDestroy() {
    // 组件被销毁了，不能进行数据传输
    // 解绑事件
    this.$bus.$off('getTrainData')
  },
  methods: {
    processTrainData(data) {
      const supportArr = [];
      for (let i = 0; i < 6; i++) {
        supportArr.push({value: data[i + ""]["support"], name: '类别' + i});
      }
      return supportArr;
    },
    draw(processData) {
      this.chart = this.$echarts.init(document.getElementById("centreLeft1Chart"));
      const option = {
        textStyle: {fontSize: 20},
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea"
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        toolbox: {
          show: true
        },
        calculable: true,
        legend: {
          orient: "horizontal",
          icon: "circle",
          bottom: 0,
          x: "center",
          data: ["类别0", "类别1", "类别2", "类别3", "类别4", "类别5"],
          textStyle: {
            color: "#fff"
          }
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: [10, 60],
            roseType: "area",
            center: ["50%", "40%"],
            data: processData
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>
